<template>
  <div class="hore-list">
    <button class="btn btn-primary" @click="goToAdd">添加英雄</button>
    <hr />
    <table class="table table-striped">
      <thead>
        <tr>
          <th>ID</th>
          <th>英雄名称</th>
          <th>英雄性别</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.id">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.gender}}</td>
          <td>{{item.time}}</td>
          <td>
            <button class="btn btn-success" style="margin-right:10px" @click="goToEdit(item.id)">编辑</button>
            <button class="btn btn-danger" @click="del(item.id)">删除</button>
          </td>
        </tr>
        <!-- 条件成立时显示 -->
        <tr v-if="list.length===0">
          <td colspan="5" style="text-align:center">暂无数据</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: []
    };
  },
  methods: {
    getList() {
      // 数据请求  请求列表
      this.$request.get("http://localhost:8087/").then(res => {
        console.log(res);

        this.list = res.data;
      });
    },
    // 删除方法
    del(id) {
      this.$request.delete(`http://localhost:8087/${id}`).then(res => {
        console.log(res);
        // 删除之后刷新列表
        this.getList();
      });
    },
    goToAdd() {
      this.$router.push({
        path: "/heroAdd"
      });
    },
    goToEdit(id) {
      this.$router.push({
        path: "/heroEdit",
        query: {
          id
        }
      });
    }
  },
  mounted() {
    // 发起请求的位置
    this.getList();
  }
};
</script>

<style lang="less" scoped>
</style>